<template>
	<view>
		<view class="issue">
			<view class="teatareabox">
				<textarea class="issuebox" v-model='issuevalue' placeholder="请输入内容" @input="isinput" />
				<view class="calcnumber">{{cursornum}}/140字</view>
				<view class="manyimgbox">
					<view class="imgboxhere">
						<block v-for='(item,index) in imgarray' :key='index'>
							<view class='multiimgbox'>
								<image src='../../static/img/fbht_ico_gb@2x.png' class='closepng'
									@click="deletebtn(index)"></image>
								<image :src='picture.getImgUrl(item)' class='multiimg'></image>
							</view>
						</block>
						<view class="multiimgbox" v-if='maximg <= 5 && maximg >= 1'>
							<image class="multiimg" @click="uploadflie" src="../../static/img/@add.png"  mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="entrue" @click='exceptionclick'>确认</view>
		</view>
	</view>
</template>

<script>
	import {talksave} from '../../api/index.js'
	export default {
		data() {
			return {
				//字数
				cursornum: 0,
				maximg: 5,
				imgarray: [],
				issuevalue: '',
			}
		},
		methods: {
			exceptionclick(){
				console.log(this.imgarray,'上传图片上数组')
				let images = ''
				images = this.imgarray.join()
				let obj = {
					info:this.issuevalue,
					images:images
				}
				if (!this.checkLogin()) return false
				talksave(obj).then(res => {
					console.log(res)
					if(res.code == 1){
						console.log("dsfesff")
						// 发布成功返回上一页
						this.$msg(res.msg)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}else{
						console.log(res.msg)
						this.$msg(res.msg)
					}
				})
			},
			isinput(al) {
				this.cursornum = al.detail.cursor
			},
			// 删除5张图片
			deletebtn(index) {
				this.imgarray.splice(index, 1)
				// 每次删除可添加最大值就   + 1
				this.maximg = Number(this.maximg) + 1
				console.log(this.imgarray)
			},
			uploadflie() {
				var that = this
				this.$api.uploadImg(that.maximg).then(res => {
					if (this.imgarray.length != 0) {
						// 不是空就添加
						// 当添加数据 能超过5个
						let canpushnumber = 5 - this.imgarray.length
						//console.log(canpushnumber,'可添加张数')

						// 这里还应该判断是否上传相同图片

						// 当添加张数大于可添加张数,截取
						if (res.length > canpushnumber) {
							let resultarray = res.slice(0, canpushnumber)
							this.imgarray.push(...resultarray)
							this.maximg = 0
						} else {
							this.imgarray.push(...res)
							that.maximg = Number(that.maximg) - Number(res.length)
						}
					} else {
						let canpushnumber = res.length
						console.log(canpushnumber, '添加张数')

						// 当添加张数大于可添加张数,截取
						if (canpushnumber > 5) {
							let resultarray = res.slice(0, 5)
							// console.log(resultarray, 666)
							this.imgarray.push(...resultarray)
							this.maximg = 0
						} else {
							this.imgarray = res
							that.maximg = Number(that.maximg) - Number(res.length)
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.issue {
		height: 100%;
		width: 100%;
		background-color: #f5f5f5;
		padding: 20rpx 30rpx 0;

		.teatareabox {
			height: auto;
			width: 100%;
			background-color: #fff;
			padding: 0 20rpx;
			margin-bottom: 100rpx;

			.issuebox {
				height: 400rpx;
				width: 100%;
				padding-top: 20rpx;
			}

			.calcnumber {
				height: 40rpx;
				line-height: 40rpx;
				text-align: end;
				color: #999;
			}

			.manyimgbox {
				height: auto;
				width: 100%;
				padding: 14rpx 0;

				.imgboxhere {
					display: flex;
					flex-wrap: wrap;

					.multiimgbox {
						height: 162rpx;
						width: 162rpx;
						padding: 20rpx;
						position: relative;

						.multiimg {
							width: 122rpx;
							height: 122rpx;
						}

						.closepng {
							width: 26rpx;
							height: 26rpx;
							position: absolute;
							top: 0;
							right: 0;
							z-index: 10;
						}
					}
				}
			}
		}

		.entrue {
			width: 650rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 0 auto;
			text-align: center;
			background: #ffdd47;
			border-radius: 20rpx;
		}
	}
</style>
